<template>
  <a-card>
    <template #title>
      <a-button type="primary" @click="routerToAdd">新增</a-button>
    </template>
    <div class="m-top-5">
      <a-table :columns="columns" :data-source="data" :pagination="false" rowKey="id">
        <template #name="{ text, record }">
          <a-button type="link" @click="routerToEdit(record)">{{ text }}</a-button>
        </template>
        <template #operation="{ record }">
          <a-button type="danger" @click="handleDelCategory(record)">删除</a-button>
        </template>
      </a-table>
    </div>
  </a-card>
</template>
<script>
import { useService } from "@/utils/request";
import { formatDateTime } from "@/utils/data";
import { categoriesCfg, delCategoryCfg } from "@/api/category.conf";
import { onMounted, ref, toRaw, createVNode } from "vue";
import { useRouter } from "vue-router";
import { Modal } from "ant-design-vue";
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
const columns = [
  {
    title: "类别名称",
    dataIndex: "name",
    slots: {
      customRender: "name",
    },
  },
  {
    title: "创建时间",
    dataIndex: "create_at",
    customRender: ({ text }) => formatDateTime(text),
  },
  {
    title: "修改时间",
    dataIndex: "update_at",
    customRender: ({ text }) => formatDateTime(text),
  },
  {
    title: "操作",
    slots: {
      customRender: "operation",
    },
  },
];
export default {
  setup() {
    const categoriesRef = ref([]);
    const request = useService(categoriesCfg);
    const router = useRouter();

    onMounted(() => {
      request.reload().then((response) => {
        categoriesRef.value = response.data || [];
      });
    });

    function routerToEdit(record) {
      console.log(toRaw(record));
      router.push({
        name: "editCategory",
        params: {
          id: record.id,
        },
      });
    }

    function routerToAdd() {
      router.push({
        name: "addCategory",
      });
    }

    function handleDelCategory() {
      Modal.confirm({
        title: "你确定要删除该条信息吗?",
        okType: "danger",
        icon: createVNode(ExclamationCircleOutlined),
        onOk() {
          console.log("OK");
        },
        onCancel() {
          console.log("Cancel");
        },
      });
      delCategoryCfg;
    }

    return {
      columns,
      data: categoriesRef,
      routerToEdit,
      routerToAdd,
      handleDelCategory,
    };
  },
};
</script>
